﻿<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>Task 41</title>
<script type="text/javascript">
    function onResize() {
        var div = document.getElementById('divAl');
        document.getElementById('divAl').style.color = 'red';
        var div1 = document.getElementById('divAl1');
        var div2 = document.getElementById('divAl2');
    }
    window.onresize = onResize;
</script>

	<style>
	html, body {height:100%;margin:0;}
	.divAl {
	position:absolute;
	border:2px solid #bb0000;
	left: 2px;
	top:0%;
	height: 33%;
    overflow: auto;
}

.divAl1 {
	position:absolute;
	border:2px solid #bb0000;
	left: 1px;
	top:33.3%;
	height: 33%;
}
.divAl2 {
	position:absolute;
	border:2px solid #bb0000;
	left: 2px;
	top:66.6%;
	height: 33%;
}
    </style>
</head>
<body>
<div  class="divAl" style="width:33%;">For task 20, improve resizing event handler 
    to place DIV elements differently when they do not fit with their content as 
    specified in task 20. Use some content for DIVs that does not fit vertically 
    when you resize the window. If they do not fit, place 2 first DIVs as 1/2 of 
    both width and height, and third DIV - as 1/2 of width right-aligned and 1:</div>
<div  class="divAl1" style="width:33%;"><img src="1.jpg" width="100%" height="100%"></img></div>
<div  class="divAl2" style="width:33%;">Італія.Іспанія.Ірак.</div>
</body>
</html>